<template>
  <div class="waterfallBox-border" :ref='"boxBorder"+Videokey'>
    <div class="waterfallBox-wrapper">
      <img :src="coverURL" class="waterfallBox-wrapper__img">
      <div :id="id" :ref="'videoBox'+Videokey" class="waterfallBox-wrapper__video"></div>
    </div>
    <div class="lower-side-box">
      <p class="lower-context">{{ VideoTitle }}</p>
      <div class="lower-info">
        <span class="waterfallBox-author">@{{ VideoAuthor }}</span>
        <span class="waterfallBox-date">·&nbsp;&nbsp;{{ showTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Player from 'xgplayer'
import { Events } from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import { functions } from '@/api'

export default {
  props: {
    Videokey: {
      type: Number,
      default: 0,
    },
    VideoURL: {
      type: String,
      default: '',
    },
    coverURL: {
      type: String,
      default: '',
    },
    VideoDate: {
      type: String,
      default: '',
    },
    VideoTitle: {
      type: String,
      default: '',
    },
    VideoAuthor: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      player: null, //实例
    }
  },
  computed: {
    id() {
      return 'videoID'+ this.Videokey
    },
    showTime() {
      return functions.getDateTransform(new Date(this.VideoDate))
    }
  },
  mounted() {
    this.initPlayer(this.id,this.VideoURL)
    
  },
  methods: {
    initPlayer(id,url) {
      let _this = this;
      if (!url) return console.warn("视频链接为空！");
      const config = {
        lang: 'zh',
        id: id,
        url: url,
        width: '260px',
        fitVideoSize: 'fixWidth',
        // 禁用中间按钮动画
        start: {
          disableAnimate: true
        },
        loop: true,
        commonStyle: {
          // 播放完成部分进度条底色
          playedColor: 'rgb(137, 171, 227)',
        },
        miniprogress: true,
        playbackRate:false,
        // 禁用样式全屏
        ignores: ['cssfullscreen'],
        // 禁用全屏
        fullscreen: false,
        controls: {
          mode: 'bottom'
        },
        leavePlayerTime: 0,
        enableContextmenu: false,
        playsinline: this.isAppleDevice(), // IOS设备设置，防止被浏览器劫持
        "x5-video-player-type": "h5", // 微信内置浏览器设置，防止被浏览器劫持
        "x5-video-orientation": "portraint",
        /**初始化首帧 */
        videoInit: false,
        // 静音播放
        autoplayMuted: true
      };
      //========================== 2，开始实例化======================
      const player = new Player(config);
      if (player) {
        this.player = player;
        // 禁用中间按钮的显示
        this.player.plugins.start.focusHide()
        // 监听视频起播数据加载完成
        this.player.on(Events.LOADED_DATA, () => {
          this.$emit('isReady')
          this.$refs['videoBox' + this.Videokey].addEventListener('mouseenter', () => {
            this.player.play().then(() => {
              this.player.controls.show()
            }).catch((e) => {
              // 播放失败，一般发生于未经用户交互时的自动播放
              console.log('播放失败', e);
            })
          })
          this.$refs['videoBox' + this.Videokey].addEventListener('mouseleave', () => {
            this.player.pause()
            this.player.controls.hide()
            this.showMiniprogress()
          })
        })
      }
    },
    // IOS设备设置，防止被浏览器劫持
    isAppleDevice() {
      const ua = navigator.userAgent.toLowerCase();
      return /iphone|ipad|phone|Mac/i.test(ua);
    },
    videoReady() {
      this.player.setConfig({
        videoInit: true
      })
      this.player.start(this.VideoURL)
    },
    // 获取并显示mini进度条
    showMiniprogress() {
      this.$refs['videoBox'+this.Videokey].querySelector("xg-mini-progress").style.display = 'block'
    }
  }
}
</script>

<style scoped>
.waterfallBox-border {
  position: absolute;
  width: 260px;
  height: auto;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s;
}
.waterfallBox-wrapper {
  position: relative;
}
.waterfallBox-wrapper__img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.waterfallBox-wrapper__video {
  opacity: 0;
  transition: opacity 0.3s;
}
.waterfallBox-wrapper__video:hover {
  opacity: 1;
}
.lower-side-box {
  height: auto;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background-color: rgb(37, 38, 50);
}
.lower-side-box:hover {
  background-color: rgb(51, 52, 63);
  transition: all 0.3s;
}
.lower-context {
  padding-left: 15px;
  padding-right: 15px;
  margin: 15px 0 10px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}
.lower-info {
  display: flex;
  padding-left: 15px;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.waterfallBox-author {
  margin-right: 10px;
}
.waterfallBox-date {
  flex-shrink: 0;
  font-size: 12px;
  margin-top: 3px
}
</style>